<!-- 网格列表 现货 -->
<template>
  <div class="all">
    <div class="all" v-if="datas != undefined">
       <!-- 类型 -->
      <div class="row jcenter">
        <SubMenuOval class="menu" :menus="menus" :menu="menu" :max="false" @menuClick="menuClick"></SubMenuOval>
      </div>
      
      <div class="warning">
        <LImage class="warning-image" :src="config.img('warning.png')"></LImage>
        <text class="font24 warning-t1 all">{{T('选择强平的订单将立即撤销委托并以市价平仓')}}</text>
      </div>

      <div class="title"  @click="allClick()">
        <text class="font24 text2 all">{{T('开仓价')+'('+baseCoin+')'}}</text>

        <div class="width10"></div>
        <text class="font24 text2 all">{{T('平仓价')+'('+baseCoin+')'}}</text>

        <div class="width10"></div>
        <text class="font24 text2 text-right all">{{T('数量')+'('+T('张')+')'}}</text>

        <LImage class="image" :src="config.img((datas.length == selects.length && datas.length != 0) ? 'xuanzhong.png' :  'weixuan.png')"></LImage>
      </div>
      
      <div class="all">
        <VTips class="all" :text="T('无订单')" v-if="datas.length == 0 && stops.length == 0"></VTips>
        <scroller class="all">
          <div>

            <!--刷新-->
            <refresh @refresh="httpGridList" :display="isRefresh ? 'show' : 'hide'">
              <loading-indicator class="load text1"></loading-indicator>
            </refresh>

            <!--挂单中-->
            <div class="cell" v-for="(item, index) in datas" v-bind:key="'cell1'+index" @click="cellClick(item)">

              <div class="row flex-3">
                <text :class="['font28', config.upDownFont(menu ? '-1' : '1')]">{{menu ? T('开空') : T('开多')}}</text>
                <text class="font28 text1 all">{{'-'+(item.openOrder.dealPrice == undefined ? item.openOrder.price : item.openOrder.dealPrice)}}</text>
              </div>

              <div class="width10"></div>
              <div class="row flex-3">
                <text :class="['font28', config.upDownFont(menu ? '1' : '-1')]">{{menu ? T('平空') : T('平多')}}</text>
                <text class="font28 text1 all">{{'-'+(item.closeOrder == undefined ? '--' : item.closeOrder.price)}}</text>
              </div>

              <div class="width10"></div>
              <text class="font28 text1 text-right flex-2">{{item.openOrder.dealAmount == undefined ? item.openOrder.amount : item.openOrder.dealAmount}}</text>

              <LImage class="image" :src="config.img(checkSelect(item, 'xuanzhong.png', 'weixuan.png'))"></LImage>
            </div>

            <!--强平中-->
            <div class="row acenter">
              <div class="width40"></div>
              <div class="line no1"></div>
              <text class="font24 text2">{{T('强平中')}}</text>
              <div class="line no1"></div>
              <div class="width40"></div>
            </div>
            <div class="cell" v-for="(item, index) in stops" v-bind:key="'cell2'+index">
              
              <div class="row flex-3">
                <text :class="['font28', config.upDownFont(menu ? '-1' : '1')]">{{menu ? T('开空') : T('开多')}}</text>
                <text class="font28 text2 all">{{'-'+(item.openOrder.dealPrice == undefined ? item.openOrder.price : item.openOrder.dealPrice)}}</text>
              </div>

              <div class="width20"></div>
              <div class="row flex-3">
                <text :class="['font28', config.upDownFont(menu ? '1' : '-1')]">{{menu ? T('平空') : T('平多')}}</text>
                <text class="font28 text2 all">{{'-'+(item.closeOrder == undefined ? '--' : item.closeOrder.price)}}</text>
              </div>

              <div class="width20"></div>
              <text class="font28 text2 text-right flex-2">{{item.openOrder.dealAmount == undefined ? item.openOrder.amount : item.openOrder.dealAmount}}</text>

              <div class="image"></div>
            </div>
          </div>
        </scroller>
      </div>

      <div :class="['but', selects.length ? 'main1' : 'no1']" @click="okClick">
        <text class="font30 text1">{{T('强平')}}</text>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.menu {
  margin-top: 20px;
}
.warning {
  flex-direction: row;
  background-color: rgba(240, 56, 105, 0.1);

  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;

  margin-top: 20px;
}
.warning-image {
  width: 28px;
  height: 28px;
  margin-top:  3px;
  margin-right: 10px;
}
.title {
  flex-direction: row;
  align-items: center;
  height: 72px;

  padding-left: 40px;
  padding-right: 40px;
}
.cell {
  flex-direction: row;
  align-items: center;
  height: 96px;
  
  padding-left: 40px;
  padding-right: 40px;
}
.image {
  width: 28px;
  height: 28px;
  margin-left: 32px;
}
.text-right{
  text-align: right;
}
.line{
  flex: 1;
  height: 1px;
  margin-left: 40px;
  margin-right: 40px;
}
.but {
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 12px;

  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 60px;
}
.flex-3 {
  flex: 3;
}
.flex-2 {
  flex: 2;
}
</style>

<script>
//组件
import SubMenuOval from '@/public/view/SubMenuOval.vue'
import VTips from "@/public/view/VTips";

//功能
import https from "@/_js/https";
import modal from "@/_js/modal";
import config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('网格列表'));

export default {

  data() {
    return {
      T:T,
      config:config,
      executeId:undefined,

      menu:0,
      menus:[T('做多'), T('做空')],
      
      datas:[], //挂单中的订单
      stops:[], //强平中的订单
      selects:[], //选中网格
      buyCellList:[], //做多网格
      sellCellList:[], //做空网格
      ids:{}, //强平中订单ID

      baseCoin:'',
      counterCoin:'',
    };
  },

  beforeDestroy() {
  },

  created() {

    var param = weex.config;
    this.executeId = param.executeId;

    config.init(()=>{
      this.httpGridList();
    },[config.OPT_UP_DOWN]);
  },
  
  components: {
    SubMenuOval,
    VTips,
  },

  //方法
  methods: {

    /********************* 初始化*/
    initData(){
      
      var datas = [];
      var stops = [];
      var array = this.menu == 0 ? this.buyCellList : this.sellCellList;
      for (let index = 0; index < array.length; index++) {
        var cell = array[index];
        if (cell.closeOrder == undefined) {
          continue;
        }
        if (this.ids[cell.openOrder.id]) {
          stops.push(cell);
        } else {
          datas.push(cell);
        }
      }
      this.stops = stops;
      this.datas = datas;
      this.selects = [];
    },
    
    /********************* HTTP*/
    //http网格列表
    httpGridList() {

      var param = {'executeId':this.executeId};
      https.post("strategyV3/queryGridList",JSON.stringify(param),true,(data) => {
        if (data.status == 200) {
          data = data.data;
          this.counterCoin = data.counterCoin;
          this.baseCoin = data.baseCoin;
          this.buyCellList = data.buyCellList ? data.buyCellList.cells : [];
          this.sellCellList = data.sellCellList ? data.sellCellList.cells : [];
          this.ids = data.selectOrderIds ? data.selectOrderIds : {};
          this.initData();
        } else {
          modal.toast(data.msg);
        }
      });
    },

    //http平仓
    httpMargin(){
      
      modal.showLoad();
      var orderIds = [];
      var ids = {}
      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        orderIds.push(map.openOrder.id);
        ids[map.openOrder.id]=map.openOrder.id;
      }

      var param = {'executeId':this.executeId, 'orderIds':JSON.stringify(orderIds)};
      https.postX("strategyV3/cellMarginCall",JSON.stringify(param),true,(data) => {
        modal.hideLoad();

        if (data.status == 200) {

          for (let index = 0; index < this.datas.length; index++) {
            var cell = this.datas[index];
            if (ids[cell.openOrder.id]) {
              this.ids[cell.openOrder.id] = cell;
            }
          }
          this.initData();
          modal.toast(T('已提交'));
        } else {
          modal.toast(data.msg);
        }
      });
    },
    /********************* 方法*/
    //检查选中  
    checkSelect(item, style1, style2){
      
      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        if (map.openOrder.id == item.openOrder.id) return style1;
      }
      return style2;
    },
    
    /********************* 按钮*/
    //菜单点击
    menuClick(menu) {
      this.menu = menu;
      this.selects = [];
      this.initData();
    },

    //全选
    allClick() {
      if (this.selects.length == this.datas.length) {
        this.selects = [];
      } else {
        this.selects = JSON.parse(JSON.stringify(this.datas));
      }
    },

    //列表点击
    cellClick(item) {

      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        if (map.openOrder.id == item.openOrder.id) {
          this.selects.splice(index, 1);
          return;
        }
      }

      this.selects.push(item);
    },

    //强平
    okClick() {
      if (!this.selects.length) {
        return;
      }

      var parm = {title:T("确认强平?"),
                  message:T("确认强平的订单将立即撤销委托并以市价平仓，浮动盈亏将转为实现盈亏，请谨慎操作。"),
                  okBtn:T("确认"), cancelBtn:T("取消")};
      modal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpMargin();
        }
      });
    },
  },
  
};
</script>
